Together with  StackBlitz
🚀 Frontend Focus

#​643 — May 15, 2024 | Read on the web

Via Devographics

The Results of State of HTML 2023 — You may recall late last year we shared the very first ‘State of HTML’ survey — from the same folks behind the excellent JavaScript and CSS efforts. Well, now we have the results from that 2023 questionnaire. Lots of interesting tidbits here, including thoughts on recent HTML features, adoption, accessibility, extensibility, and much more.

💬 “Some argue that improving HTML is futile, but the survey resoundingly demonstrates the contrary. Developers crave more interactive HTML elements.”
— Lea Verou

Make the Most of Your Design System with StackBlitz — We know there’s no shortage of challenges when building and maintaining enterprise design systems. StackBlitz helps you make the most of yours by improving developer experience, driving adoption, increasing bug reporting efficiency, and simplifying collaboration.

StackBlitz sponsor

10 Updates from Google I/O 2024: Unlocking the Power of AI for Every Web Developer — Google’s annual developer conference got underway yesterday, and we already have a handful of headlines for those of us working on the web — this post outlines 10 features that Google are keen to put the spotlight on, including (to no surprise) lots of AI additions. ▶️ Here's the developer keynote if you want to watch. We’ll share more, including session videos, as they drop.

Paul Kinlan

Announcing the Web Platform Dashboard — The ‘Web Platform Dashboard’, announced at Google I/O, is a new, easy way to see a high-level overview of the entire web platform mapped out as a set of features, along with their respective browser support.

Rachel Andrew (Chrome)

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

Introducing the CSS Anchor Positioning API — With anchor positioning built into the browser, you’ll be able to build layered user interfaces without relying on third-party libraries — it’s in Chrome as of version 125.

Una Kravets

The Times You Need a Custom @property Instead of a CSS Variable — Demonstrates where custom properties may be a more suitable option over variables, and showcases some of the freedom and flexibility that custom properties afford us.

Preethi Sam

Your Background Images Might Be Causing CLS by Salma Alam‑Naylor — In this post, learn how to to avoid unexpected cumulative layout shift (CLS) with tried and tested solutions.

Sentry sponsor

The Modern Guide for Making CSS Shapes — A comprehensive guide with modern techniques for creating common shapes with the smallest and most flexible CSS code possible.

Temani Afif

I’m Worried About the Tabbing Behavior, Rather than the Syntax and Name of 'CSS Masonry' — Some more thoughts on the recent CSS Masonry debate, with Andy noting that we should “worry about the basics first”.

Andy Bell

Hardest Problem in Computer Science: Centering Things — “Even if it’s hard. Even if tools make it inconvenient. Even if you have to search for solutions. Together, I trust, we can find our way back to putting one rectangle inside another rectangle without messing it up.

Niki Tonsky

Manifesto for a Humane Web — In an age of trackers, bots, and generative AI, Michelle makes the case for a web by and for humans.

Michelle Barker

Five Basic Things About JavaScript That Will Help Non JavaScript-Focused Web Designers
Chris Coyier

🔧 Code, Tools & Resources

WordPress Studio: A Local App for Running WordPress in Dev — There have long been unofficial ways to run WordPress on your local machine to make life easier as you set things up, design themes, etc. but now WordPress has an official, quick, lightweight, and shareable local WordPress dev environment. For Mac so far, with Windows in ‘early access.’

WordPress

Adding Customizable Network Visualization Capabilities to Your Apps — Find out how JS libraries can help you build rich network visualizations in your apps that are interactive & insightful.

Linkurious sponsor

DOM Projects: A Collection of Projects to Learn Frontend Development — Mainly for beginners, this serves as inspiration for learning to build simple apps with JS and DOM manipulation. Choose a project to view the source and try to build the same app yourself.

Jisan Mia Beginner

WyW-in-JS: A Toolkit for Zero-Runtime CSS-in-JS Libraries — Meaning “Whatever-you-want-in-JS”, it allows developers to build their own CSS-in-JS solution that’s decoupled from any specific implementation. As an example, Material UI’s Pigment CSS is based on this tool.

Anton Evzhakov

🎨 Color Picker: Pick Colors by Clicking on Any Image — Upload an image then use an eyedropper tool to select pixels one at a time to generate a color palette. You can also save palettes and choose the output format (RGB, Hex, HSL). Easier than installing a local tool, perhaps.

Rayid Ashraf

go-masonry-gallery: A CLI Tool to Generate a Simple HTML/CSS Masonry Gallery from a Local Folder — Note that the generated result makes use of the recently debated, still experimental Masonry feature for CSS grid layout.

Dominick Peluso

Ipx.